<template>
	<view>
		<!-- 顶部导航栏 -->
		<!-- 分割线 -->
		<view class="top">
			<view class="log">
				<text>安</text>
				<text>住</text>
				<text>客</text>
			</view>
		</view>
		<!-- 页面注册板块 -->
		<u-form :model="form" ref="uForm" class="form">
			<!-- <u-form-item  prop="email" labelWidth="100" > -->
			<u-input v-model="form.email" class="form-item" prefixIcon="email"
				prefixIconStyle="font-size: 22px;color: #909399" placeholder="请输入你的邮箱">
				<template slot="suffix">
					<!-- <u-code ref="uCode" @change="codeChange" seconds="20" changeText="X秒重新获取哈哈哈"></u-code> -->
					<!-- <u-button @tap="getCode" class="btn" :text="tips" type="text">获取验证码</u-button> -->
					<u--text v-if="!showTime" @tap="getCode" type="info" text="获取验证码"></u--text>
					<text v-else> {{accountTime}}秒重新获取</text>
				</template>
			</u-input>
			<!-- </u-form-item> -->
			<!-- <u-form-item label="登录密码" prop="password" labelWidth="160" leftIcon="level"> -->
			<u-input v-model="form.password" type="password" prefixIcon="lock"
				prefixIconStyle="font-size: 22px;color: #909399" class="form-item" placeholder="请输入验证码" />
			<!-- </u-form-item> -->
		</u-form>
		<view class="agree_line">
			<u-icon v-if="isChecked" name="checkmark-circle-fill" color="#2979ff" size="24"
				@click="isChecked=!isChecked">
			</u-icon>
			<u-icon v-if="!isChecked" name="checkmark-circle" size="24" @click="isChecked=!isChecked"></u-icon>
			<text>登录/注册代表你同意《安住客用户服务协议》及《安住客隐私权政策》
			</text>
		</view>
		<view class="config">
			<u-button class="config_btn" type="primary" text="登录" :disabled="!isChecked" @click="submit()"></u-button>
		</view>
	</view>
</template>

<script>
	import api from '../../utils/api.js'
	export default {
		data() {
			return {
				tips: '',
				accountTime: 10,
				showTime: false,
				avatar: 'https://cdn.uviewui.com/uview/common/logo.png',
				agree: 'true',
				isChecked: false,
				form: {
					// email: 'test@a.com',
					email: 'test@a.com',
					password: '',
					// password: '123123'
				},
				rules: {
					// 字段名称
					password: [{
						min: 5,
						message: '密码要5个数字',
						trigger: 'change'
					}],
					email: [{
						required: true,
						type: 'email',
						message: '请输入邮箱',
						trigger: ['change', 'blur'],
					}]
				}
			}
		},
		methods: {
			submit() {
				const isEmail = uni.$u.test.email(this.form.email)
				if (isEmail && this.form.password) {
					const params = {
						email: this.form.email,
						password: this.form.password
					}
					api.login(params).then(res => {
						console.log(res.access_token)
						if (res.access_token) {
							uni.showToast({
								title: '登录成功',
								duration: 2000
							});
							//向本地存token
							uni.setStorage({
								key: 'token',
								data: res.access_token,
							})
							// 跳转到首页
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}, 2000)
						} else {
							uni.showToast({
								title: '登录失败',
								duration: 2000
							});
						}
					})

				} else {
					console.log('错误')
					return
				}
			},
			getCode() {
				if (uni.$u.test.email(this.form.email)) {
					this.form.password = '123123'
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					this.showTime = !this.showTime
					let timer = setInterval(() => {
						this.accountTime--
						if (this.accountTime === 0) {
							this.showTime = !this.showTime
							clearInterval(timer)
							this.accountTime = 10
						}
					}, 1000)
				} else {
					uni.$u.toast('请输入正确的邮箱地址');
				}

			},
			changeAgree(val) {
				console.log(val)
			},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {}
	}
</script>

<style lang="scss" scoped>
	.log {
		font-family: Microsoft YaHei ! important;
		font-weight: bold;
		font-size: 80rpx;
		text-align: center;
		color: #60C696;
		line-height: 200rpx;

		text {
			margin: 6rpx;
		}
	}

	.form {
		width: 95%;
		margin: auto;

		.form-item {
			background-color: #F8F9FB;
			margin: 20rpx 0;
			line-height: 70rpx;
		}

		.toregister {
			text-align: center;
		}
	}

	.agree_line {
		display: flex;
		align-items: flex-start;
		text-align: left;
		margin-top: 30rpx;
	}

	.toregister {
		text-align: center;
	}

	.config_btn {
		margin-top: 50rpx;
		height: 100rpx;
	}
</style>
